<template>
  <div class="container">
    <div class="form old-tel">
      <div class="item">
        <div class="label">手机号</div>
        <input type="number"
               disabled
               class="inp"
               maxlength="11"
               v-model="user_old_tel">
      </div>
      <div class="item">
        <div class="label">新手机号</div>
        <input type="number"
               placeholder="请输入新手机号"
               class="inp"
               maxlength="11"
               v-model="user_tel">
      </div>
      <div class="item">
        <div class="label">登陆密码</div>
        <input type="password"
               placeholder="请输入登录密码"
               class="inp"
               maxlength="20"
               v-model="user_pwd">
      </div>
      <div class="item">
        <div class="label">验证码</div>
        <input type="number"
               class="inp"
               placeholder="请输入验证码"
               maxlength="6"
               v-model="user_check">
        <div class="get-msg"
             @click.stop="get_check()">
          {{msg_btn}}
        </div>
      </div>
    </div>
    <div class="sub-btn"
         @click="save()">
      保存
    </div>
  </div>
</template>

<script>
import common from "@/assets/js/mmk_common.js";
let timer,
  num = 60;
export default {
  data () {
    return {
      user_old_tel: "",
      user_tel: "",
      user_pwd: "",
      user_check: "",
      msg_btn: "获取验证码",
      isget: false
    };
  },
  methods: {
    save () {
      if (this.user_tel == "") {
        common.mmk_Loading(2, "请输入新手机号")
        return false;
      } else if (this.user_pwd == "") {
        common.mmk_Loading(2, "请输入密码")
        return false;
      } else if (this.user_check == "") {
        common.mmk_Loading(2, "请输入验证码")
        return false;
      } else {
        common.mmk_Loading(0)
        common.fly_post("api/v4_2/set_username", {
          username: this.user_tel,
          password: this.user_pwd,
          verify_code: this.user_check
        }, result => {
          common.mmk_Loading(1)
          let res = result.data;
          if (res.status_code == 0) {
            common.mmk_Loading(2, "修改成功")
            wx.navigateBack({
              delta: 1 //返回的页面数，如果 delta 大于现有页面数，则返回到首页,
            });
          } else {
            common.mmk_Loading(2, res.message)
          }
        })
      }
    },
    get_check () {
      if (this.user_tel == "") {
        common.mmk_Loading(2, "请输入新手机号")
        return false;
      } else {
        if (this.isget == true) {
          return false;
        }
        common.mmk_Loading(0)
        clearInterval(timer);
        common.fly_post("api/v4_2/edit_phone/send", {
          phone: this.user_tel
        }, result => {
          common.mmk_Loading(1)
          let res = result.data;
          if (res.status_code == 0) {
            common.mmk_Loading(2, "获取短信成功，请注意查收")
            this.isget = true;
            timer = setInterval(() => {
              this.msg_btn = num + "秒后可重新发送";
              num--;
              if (num <= 0) {
                this.msg_btn = "发送验证码";
                this.isget = false;
                num = 60;
                clearInterval(timer);
              }
            }, 1000);
          } else {
            common.mmk_Loading(2, res.message)
          }
        })
      }
    }
  },
  onLoad () {
    wx.setNavigationBarTitle({
      title: "修改手机号码"
    });
    Object.assign(this.$data, this.$options.data());
  },
  onShow () {
    this.msg_btn = "获取验证码";
    let user_data = wx.getStorageSync("user_data");
    if (user_data.username) {
      this.user_old_tel = user_data.username;
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  background: rgba(243, 244, 246, 1);
  box-sizing: border-box;
  .form {
    width: 100%;
    min-height: 44px;
    .item {
      height: 44px;
      line-height: 44px;
      display: flex;
      padding-left: 15px;
      position: relative;
      background-color: #fff;
      margin-bottom: 1px;
      &:first-of-type {
        margin-bottom: 10px;
        box-shadow: 0 1px 1px 1px rgba(204, 204, 204, 0.2042) inset;
      }
      .label {
        min-width: 60px;
        font-size: 14px;
        font-family: "Regular";
        color: rgba(102, 102, 102, 1);
      }
      .inp {
        display: block;
        height: 100%;
        line-height: 44px;
        font-size: 14px;
        padding-left: 10px;
        flex: 1;
      }
      .get-msg {
        height: 30px;
        line-height: 30px;
        text-align: center;
        border-radius: 30px;
        border: 1px solid #ff383e;
        font-size: 12px;
        font-family: "Regular";
        color: #ff383e;
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 99;
        padding: 0 15px;
      }
    }
  }
  .sub-btn {
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background: rgba(255, 56, 62, 1);
    font-size: 17px;
    font-family: "Medium";
    color: rgba(255, 255, 255, 1);
    position: absolute;
    bottom: 0px;
  }
}
</style>


